/*------------------------------------*\

    @Grid System

\*------------------------------------*/

[class^="col"] {
	float: left;
	min-height: 1px;
	.rem(margin-left, 20);

	@media @bp-mobile {
		float: none;
		width: 100%;
		margin-left: 0;
	}

	@media @bp-desktop {
		.rem(margin-left, 30);
	}

}

.row {
	@media @bp-desktop {
		.rem(margin-left, -30);
		*zoom: 1;
	}
	@media @bp-mobile {
		.rem(margin-left, 0);
	}
	.rem(margin-left, -20);
		*zoom: 1;
	}

.row:before,
.row:after {
	display: table;
	line-height: 0;
	content: "";
}

.row:after {
	clear: both;
}


.container {
	.rem(width, 940);
	margin-left: auto;
	margin-right: auto;

	@media @bp-mobile {
		width: 95%;
		width: auto;
		float: none;
	}

	@media @bp-tablet {
		.rem(width, 724);
	}

	@media @bp-desktop {
		.rem(width, 1170);
	}
}



.col12 {
	.rem(width, 940);

	@media @bp-desktop {
		.rem(width, 1170);
	}
	@media @bp-tablet {
		.rem(width, 724);
	}
	@media @bp-mobile {
		 width: 100%;
	}
}

.col11 {
	.rem(width, 860);

	@media @bp-desktop {
		.rem(width, 1070);
	}
	@media @bp-tablet {
		.rem(width, 662);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col10 {
	.rem(width, 780);

	@media @bp-desktop {
		.rem(width, 970);
	}
	@media @bp-tablet {
		.rem(width, 600);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col9 {
	.rem(width, 700);

	@media @bp-desktop {
		.rem(width, 870);
	}
	@media @bp-tablet {
		.rem(width, 538);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col8 {
	.rem(width, 620);

	@media @bp-desktop {
		.rem(width, 770);
	}
	@media @bp-tablet {
		.rem(width, 476);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col7 {
	.rem(width, 540);

	@media @bp-desktop {
		.rem(width, 670);
	}
	@media @bp-tablet {
		.rem(width, 414);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col6 {
	.rem(width, 460);

	@media @bp-desktop {
		.rem(width, 570);
	}
	@media @bp-tablet {
		.rem(width, 352);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col5 {
	.rem(width, 380);

	@media @bp-desktop {
		.rem(width, 470);
	}
	@media @bp-tablet {
		.rem(width, 290);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col4 {
	.rem(width, 300);

	@media @bp-desktop {
		.rem(width, 370);
	}
	@media @bp-tablet {
		.rem(width, 228);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col3 {
	.rem(width, 220);

	@media @bp-desktop {
		.rem(width, 270);
	}
	@media @bp-tablet {
		.rem(width, 166);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col2 {
	.rem(width, 140);

	@media @bp-desktop {
		.rem(width, 170);
	}
	@media @bp-tablet {
		.rem(width, 104);
	}
	@media @bp-mobile {
		width: 100%;
	}
}

.col1 {
	.rem(width, 60);

	@media @bp-desktop {
		.rem(width, 70);
	}
	@media @bp-tablet {
		.rem(width, 42);
	}
	@media @bp-mobile {
		width: 100%;
	}
}



// 940px offset //
.offset12 { .rem(width, 980); }
.offset11 { .rem(width, 900); }
.offset10 { .rem(width, 820); }
.offset9  { .rem(width, 740); }
.offset8  { .rem(width, 660); }
.offset7  { .rem(width, 580); }
.offset6  { .rem(width, 500); }
.offset5  { .rem(width, 420); }
.offset4  { .rem(width, 340); }
.offset3  { .rem(width, 260); }
.offset2  { .rem(width, 180); }
.offset1  { .rem(width, 100); }


@media  (min-width: 768px) and (max-width: 979px) {

	.offset12 { .rem(width, 764); }
	.offset11 { .rem(width, 702); }
	.offset10 { .rem(width, 640); }
	.offset9  { .rem(width, 578); }
	.offset8  { .rem(width, 516); }
	.offset7  { .rem(width, 454); }
	.offset6  { .rem(width, 392); }
	.offset5  { .rem(width, 330); }
	.offset4  { .rem(width, 268); }
	.offset3  { .rem(width, 206); }
	.offset2  { .rem(width, 144); }
	.offset1  { .rem(width, 82); }

	.row-fluid {
		width: 100%;
		*zoom: 1;
	}

	.row-fluid:after {
		clear: both;
	}

	.row-fluid [class^="col"] {

		@media @bp-mobile {
			margin-left: 0;
		}

		display: block;
		float: left;
		width: 100%;
		min-height: 30px;
		margin-left: 2.76%;
		*margin-left: 2.70%;
		.box-sizing(border-box);
	}

	.row-fluid [class^="col"]:first-child {
		margin-left: 0;
	}

	.row-fluid .controls-row [class^="col"] + [class^="col"] {
		margin-left: 2.76%;
	}

	.row-fluid .col12 { width: 100%; }
	.row-fluid .col11 { width: 91.43%; }
	.row-fluid .col10 { width: 82.87%; }
	.row-fluid .col9 { width: 74.30%; }
	.row-fluid .col8 { width: 65.74%; }
	.row-fluid .col7 { width: 57.18%; }
	.row-fluid .col6 { width: 48.61%; }
	.row-fluid .col5 { width: 40.05%; }
	.row-fluid .col4 { width: 31.49; }
	.row-fluid .col3 { width: 22.92%; }
	.row-fluid .col2 { width: 14.36%; }
	.row-fluid .col1 { width: 5.8%; }

	.row-fluid .offset12 { margin-left: 105.52%; }
	.row-fluid .offset12:first-child { margin-left: 102.76%; }
	.row-fluid .offset11 { margin-left: 96.96%; }
	.row-fluid .offset11:first-child { margin-left: 94.19%; }
	.row-fluid .offset10 { margin-left: 88.39%; }
	.row-fluid .offset10:first-child { margin-left: 85.63%; }
	.row-fluid .offset9 { margin-left: 79.83%; }
	.row-fluid .offset9:first-child { margin-left: 77.07%; }
	.row-fluid .offset8 { margin-left: 71.27%; }
	.row-fluid .offset8:first-child { margin-left: 68.50%; }
	.row-fluid .offset7 { margin-left: 62.70; }
	.row-fluid .offset7:first-child { margin-left: 59.94%; }
	.row-fluid .offset6 { margin-left: 54.148%; }
	.row-fluid .offset6:first-child { margin-left: 51.38%; }
	.row-fluid .offset5 { margin-left: 45.58%; }
	.row-fluid .offset5:first-child { margin-left: 42.81%; }
	.row-fluid .offset4 { margin-left: 37.01%; }
	.row-fluid .offset4:first-child { margin-left: 34.25%; }
	.row-fluid .offset3 { margin-left: 28.45%; }
	.row-fluid .offset3:first-child { margin-left: 25.69%; }
	.row-fluid .offset2 { margin-left: 19.88%; }
	.row-fluid .offset2:first-child { margin-left: 17.12%; }
	.row-fluid .offset1 { margin-left: 11.32%; }
	.row-fluid .offset1:first-child { margin-left: 8.56%; }
}

.row-fluid {
	width: 100%;
	*zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
	display: table;
	line-height: 0;
	content: "";
}

.row-fluid:after {
	clear: both;
}

.row-fluid [class^="col"] {
	display: block;
	float: left;
	width: 100%;
	min-height: 30px;
	margin-left: 2.12%;
	.box-sizing(border-box);
}

.row-fluid [class^="col"]:first-child { margin-left: 0; }
.row-fluid .controls-row [class^="col"] + [class^="col"] { margin-left: 2.12%; }

.row-fluid .col12 { width: 100%; }
.row-fluid .col11 { width: 91.48%; }
.row-fluid .col10 { width: 82.97%; }
.row-fluid .col9 { width: 74.46%; }
.row-fluid .col8 { width: 65.95%; }
.row-fluid .col7 { width: 57.44%; }
.row-fluid .col6 { width: 48.93%; }
.row-fluid .col5 { width: 40.42%; }
.row-fluid .col4 { width: 31.91%; }
.row-fluid .col3 { width: 23.40%; }
.row-fluid .col2 { width: 14.895%; }
.row-fluid .col1 { width: 6.38%; }

.row-fluid .offset12 { margin-left: 104.25%; }
.row-fluid .offset12:first-child { margin-left: 102.12%; }
.row-fluid .offset11 { margin-left: 95.74%; }
.row-fluid .offset11:first-child { margin-left: 93.61%; }
.row-fluid .offset10 { margin-left: 87.23%; }
.row-fluid .offset10:first-child { margin-left: 85.10%; }
.row-fluid .offset9 { margin-left: 78.72%; }
.row-fluid .offset9:first-child { margin-left: 76.59%; }
.row-fluid .offset8 { margin-left: 70.21%; }
.row-fluid .offset8:first-child { margin-left: 68.08%; }
.row-fluid .offset7 { margin-left: 61.70%; }
.row-fluid .offset7:first-child { margin-left: 59.57%; }
.row-fluid .offset6 { margin-left: 53.195%; }
.row-fluid .offset6:first-child { margin-left: 51.06%; }
.row-fluid .offset5 { margin-left: 44.68%; }
.row-fluid .offset5:first-child { margin-left: 42.55%; }
.row-fluid .offset4 { margin-left: 36.17%; }
.row-fluid .offset4:first-child { margin-left: 34.04%; }
.row-fluid .offset3 { margin-left: 27.65%; }
.row-fluid .offset3:first-child { margin-left: 25.53%; }
.row-fluid .offset2 { margin-left: 19.14%; }
.row-fluid .offset2:first-child { margin-left: 17.02%; }
.row-fluid .offset1 { margin-left: 10.63%; }
.row-fluid .offset1:first-child { margin-left: 8.51%; }

@media @bp-mobile {
	.row-fluid {
		width: 100%;
	}

	[class^="col"],
	.uneditable-input[class^="col"],
	.row-fluid [class^="col"] {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
		.box-sizing(border-box);
	}
}

[class^="col"].hide,
.row-fluid [class^="col"].hide {
	display: none;
}

[class^="col"].pull-right,
.row-fluid [class^="col"].pull-right {
	float: right;
}

.container {
	margin-right: auto;
	margin-left: auto;
	*zoom: 1;
}

.container:before,
.container:after {
	display: table;
	line-height: 0;
	content: "";
}

.container:after {
	clear: both;
}

.container-fluid {
	.rem(padding-right, 20);
	.rem(padding-left, 20);
	*zoom: 1;
}

.container-fluid:before,
.container-fluid:after {
	display: table;
	line-height: 0;
	content: "";
}

.container-fluid:after {
	clear: both;
}

